<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .el-header a{
            color: black;
            text-decoration: none;
        }
        .el-card__body, .el-main{
            padding: 0;
        }
        .el-card__body>p:hover{
            color:red;
        }

    </style>
</head>
<body>
<div id="app" style="margin: 0 auto">
    <el-container>
        <el-header height="300px">
            <div style="margin: 0 auto;width: 1200px">
                <img src="img/logo.jpg"  alt="" style="vertical-align: middle">
                <a href="">首页</a><el-divider direction="vertical"></el-divider>
                <a href="">新闻列表</a><el-divider direction="vertical"></el-divider>
                <a href="">欠费查询</a><el-divider direction="vertical"></el-divider>
                <a href="">投诉信息</a><el-divider direction="vertical"></el-divider>
                <a href="">车位信息</a><el-divider direction="vertical"></el-divider>
                <a href="">联系我们</a>
                <img src="img/news_banner.jpg" style="width: 1200px">
            </div>
        </el-header>
        <el-main>
            <!--中间导航栏开始-->
            <div style="background-color: white;width: 1200px;margin: 0 auto;">
                <el-menu style="margin:0 auto" mode="horizontal" background-color="white"
                         text-color="#0000A0" active-text-color="#0000A0">
                    <el-submenu index="1">
                        <template slot="title">集团动态</template>
                        <el-menu-item index="1-1">选项1</el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                        <el-menu-item index="1-3">选项3</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">下属动态</template>
                        <el-menu-item index="2-1">选项1</el-menu-item>
                        <el-menu-item index="2-2">选项2</el-menu-item>
                        <el-menu-item index="2-3">选项3</el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">媒体报道</template>
                        <el-menu-item index="3-1">选项1</el-menu-item>
                        <el-menu-item index="3-2">选项2</el-menu-item>
                        <el-menu-item index="3-3">选项3</el-menu-item>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">企业内刊</template>
                        <el-menu-item index="4-1">选项1</el-menu-item>
                        <el-menu-item index="4-2">选项2</el-menu-item>
                        <el-menu-item index="4-3">选项3</el-menu-item>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title">通知公告</template>
                        <el-menu-item index="5-1">选项1</el-menu-item>
                        <el-menu-item index="5-2">选项2</el-menu-item>
                        <el-menu-item index="5-3">选项3</el-menu-item>
                    </el-submenu>
                    <el-submenu index="6">
                        <template slot="title">医药健康</template>
                        <el-menu-item index="6-1">选项1</el-menu-item>
                        <el-menu-item index="6-2">选项2</el-menu-item>
                        <el-menu-item index="6-3">选项3</el-menu-item>
                    </el-submenu>
                    <span style="float: right;position: relative;top: 15px;color:#0000A0">
                    <i class="el-icon-s-home">新闻中心</i>
                    <i class="el-icon-caret-right">集团动态</i>
                    </span>
                </el-menu>

            </div>
            <!--中间导航栏结束-->
            <!--中间新闻部分开始-->
            <div style="width: 1200px;margin: 0 auto">
                <el-row>
                    <el-col span="12">
                        <img src="img/middle.jpg" width="500" style="margin-left: 10px;margin-top: 20px">
                    </el-col>
                    <el-col span="12">
                        <p style="font-size: 30px;font-weight: bold;color:#0000A0">2023-03-01</p>
                        <p style="font-size: 24px;">深物业集团召开2022年工程管理
                            <br>总结暨2023年工程管理工作开展思路专题会议</p>
                        <p style="font-size: 16px">近日，深物业集团召开2022年度工程管理总结暨2023年工程管理工作开展思路专题会议。</p>
                    </el-col>
                </el-row>
            </div>
            <!--中间新闻部分结束-->
            <!--中间新闻卡片部分开始-->
            <div style="background-color: gainsboro;margin:10px auto;width: 1200px">
                <el-row gutter="20" style="margin:10px 20px;padding: 20px">
                    <el-col span="8" v-for="n in news">
                        <el-card>
                            <img :src="n.url" width="100%">
                            <p style="font-size: 12px;margin: 10px 20px;color: #d91519">{{n.data}}</p>
                            <p style="font-size: 14px;margin: 10px 20px">{{n.title}}</p>
                            <p style="font-size: 14px;margin: 10px 20px">{{n.content}}</p>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
            <!--中间新闻卡片部分结束-->
        </el-main>
        <el-footer>
            <div style="background-color:#e1e1e1;height: 200px;width: 1200px;margin: 0 auto">
                <el-row>
                    <el-col span="12">
                        <div style="float: right;padding: 70px">
                            <i class="el-icon-s-custom" style="color: #6b6b6b;margin-bottom: 10px">公司名称：福聚财物业管理有限公司</i>
                            <br>
                            <i class="el-icon-location" style="color: #6b6b6b;margin-bottom: 10px">公司地点：上海徐家汇</i>
                            <br>
                            <i class="el-icon-phone" style="color: #6b6b6b">联系我们：00000000</i>
                            <br>
                        </div>
                    </el-col>
                    <el-col span="12">
                        <img src="ewm.jpg" style="position: relative;top: 40px">
                    </el-col>
                </el-row>
            </div>
        </el-footer>
    </el-container>
</div>
</body>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                /*中间部分每个卡片的新闻信息*/
                news:[{url:"img/1.jpg",data:"2023.03.01",title:"深物业集团监事会主席马洪涛到深福保集团座谈交流",content:"2月24日，深物业集团监事会主席马洪涛带领集团纪检监察室相关人员到深福保集团座谈交流。深福保集团纪委书记、监事会主席何桂平，纪检监察室、审计部、法务室等相关部门负责人参加座谈交流。"},
                    {url:"img/2.jpg",data:"2023.03.01",title:"深物业集团监事会主席马洪涛到深福保集团座谈交流",content:"2月24日，深物业集团监事会主席马洪涛带领集团纪检监察室相关人员到深福保集团座谈交流。深福保集团纪委书记、监事会主席何桂平，纪检监察室、审计部、法务室等相关部门负责人参加座谈交流。"},
                    {url:"img/3.jpg",data:"2023.03.01",title:"深物业集团监事会主席马洪涛到深福保集团座谈交流",content:"2月24日，深物业集团监事会主席马洪涛带领集团纪检监察室相关人员到深福保集团座谈交流。深福保集团纪委书记、监事会主席何桂平，纪检监察室、审计部、法务室等相关部门负责人参加座谈交流。"},
                    {url:"img/4.jpg",data:"2023.03.01",title:"深物业集团监事会主席马洪涛到深福保集团座谈交流",content:"2月24日，深物业集团监事会主席马洪涛带领集团纪检监察室相关人员到深福保集团座谈交流。深福保集团纪委书记、监事会主席何桂平，纪检监察室、审计部、法务室等相关部门负责人参加座谈交流。"},
                    {url:"img/5.jpg",data:"2023.03.01",title:"深物业集团监事会主席马洪涛到深福保集团座谈交流",content:"2月24日，深物业集团监事会主席马洪涛带领集团纪检监察室相关人员到深福保集团座谈交流。深福保集团纪委书记、监事会主席何桂平，纪检监察室、审计部、法务室等相关部门负责人参加座谈交流。"},
                    {url:"img/6.jpg",data:"2023.03.01",title:"深物业集团监事会主席马洪涛到深福保集团座谈交流",content:"2月24日，深物业集团监事会主席马洪涛带领集团纪检监察室相关人员到深福保集团座谈交流。深福保集团纪委书记、监事会主席何桂平，纪检监察室、审计部、法务室等相关部门负责人参加座谈交流。"}]
            }
        },
        methods:{
        }
    })
</script>
</html>